$(document).ready(function() {
    var data = [
        {
            label: "Regular",
            data: regular,
            bars: {
                show: true,
                barWidth: 12*24*60*60*30,
                fill: true,
                lineWidth:0,
                order: 1,
                fillColor:  "rgba(10,166,153, 0.7)"
            },
            color: "rgba(10,166,153, 0.7)"
        },
        {
            label: "Midgrade",
            data: midgrade,
            bars: {
                show: true,
                barWidth: 12*24*60*60*30,
                fill: true,
                lineWidth: 0,
                order: 2,
                fillColor:  "rgba(0,144,217, 0.7)"
            },
            color: "rgba(0,144,217, 0.7)"
        },
        {
            label: "Premium",
            data: premium,
            bars: {
                show: true,
                barWidth: 12*24*60*60*30,
                fill: true,
                lineWidth: 0,
                order: 3,
                fillColor:  "rgba(253,208,28, 0.7)"
            },
            color: "rgba(253,208,28, 0.7)"
        },
    ];
	     
    $.plot($("#placeholder-bar-chart"), data, {
        xaxis: {
            min: 1386663840000,
            max: 1389660000000,
            mode: "time",
            timeformat: "%m/%d/%y",
//            ticks:[[1386783900000, "1386783900000"], [1387289820000, "1387289820000"], [1388424000000, "1388424000000"], [1389620940000, "1389620940000"]],
//            tickLength: 0, // hide gridlines
            axisLabel: 'Day',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        yaxis: {
            min: 0,
            max: 6,
            axisLabel: 'Value',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        grid: {
            hoverable: true,
            clickable: false,
            borderWidth: 1,
			borderColor:'#f0f0f0',
			labelMargin:8
        },
        series: {
            shadowSize: 1
        }
    });
});